<template>
	 <view class="body">
	    <uni-nav-bar 
		left-icon="back" 
		status-bar=true
		fixed=true
		color="#fff"
		left-text="返回" 
		right-text="" 
		title="中奖列表"
		background-color="#37c0b9"
		@clickLeft="toback"
		></uni-nav-bar>
		<view>
			<!-- 下拉刷新 上拉加载 -->
			<view class="list" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
				<sib-list ref="sibList" @isRefresh='isRefresh' @scrolltolowerFn="scrolltolowerFn">
					<!-- 内部block可自定义 -->
					<block class="lists" slot="sibScrollList">
						  <view class="hotitem" v-for="(item,index) in list" :key="index" >
							<view class="main" @click="detail(item.id)">
								<view class='items'>
									<view>活动名称：{{item.ansc.title}}</view>
									<view>答题时间：{{item.created_at}}</view>
									<text class='status success' v-if="item.is_success == 2">挑战成功</text>
									<text class='status fail' v-else>挑战失败</text>
								</view>
								<!-- <view class="top">
									{{item.created_at}}
								</view>
								<view class="bottom">
									<view class="bottom-title">
										{{item.ansc.title}}
									</view>
								</view> -->
							</view>
						  </view>
					</block>
				</sib-list>
			</view>
		</view>
	  </view>
</template> 

<script>
	import api from '@/pages/utils/api.js';
	export default {
		data() {
			return {
				maintitle:'菜单',
				bgcolor:"#409ED7",
				list: [], // 数据集
				currPage: 1, // 当前页码
				totalPage: 1 ,
				list:[]
			}
		},
		onLoad(option) {
				this.maintitle = option.title;	
		},
		mounted() {
			 
		},  
		
		onShow() {
			this.getlist();
		},
		
		methods: {
			toback:function(){
				uni.navigateBack({
				    delta: 1,
				    animationType: 'pop-out',
				    animationDuration: 200
				});
			},
			//中奖详情页面跳转
			detail(id){
				 
				uni.navigateTo({
					url:'/pages/member/list_detail/list_detail?id='+id					
				})
			},
			// 上划加载更多
			  loadMore() {
				console.log('loadMore');
				 this.$refs.loadRefresh[0].loadOver();
			  },
			  
			  getlist(){
				 api.getAnswerLogs({
				 }).then(res=>{
				 	console.log(res.code)
				 	this.list=res.data
				 	this.id=res.id
				 	if(res.code==-1){
				 		uni.showModal({
				 		    title: '提示',
				 			confirmText:"去答题",
				 		    content: '您暂未答题哦',
				 		    success: function (res) {
				 		        if (res.confirm) {
				 		           uni.switchTab({
				 		               url:"../../answer/index"
				 		           });
				 		        } else if (res.cancel) {
				 		            console.log('用户点击取消');
				 					uni.navigateBack({
				 						delta:1
				 					})
				 		        }
				 		    }
				 		});
				 	}
				 	
				 	
				 }) 
			  },
			  
			  // 下拉刷新数据列表
			  refresh() {
				  uni.showToast({
				  	title: '刷新成功',
				  	icon:'none',
				  	position:'bottom',
				  	duration: 2000
				  });
				console.log('refresh')
			  },
			  
			  // 刷新touch监听
			  touchstart: function(e) {
			      this.$refs.sibList.refreshStart(e);
			  },
			  touchmove: function(e) {
			      this.$refs.sibList.refreshMove(e);
			  },
			  touchend: function(e) {
			      this.$refs.sibList.refreshEnd(e);
			  },
			  
			  // 下拉刷新
			  isRefresh: function() {
			      const _this = this
			      setTimeout(() => {
			          uni.showToast({
			              icon: 'none',
			              title: '刷新成功'
			          });
			         _this.getlist();
			          // 刷新结束调用
			          this.$refs.sibList.endAfter()
			      }, 1000)
			  },
			  
			  // 上拉加载
			  scrolltolowerFn: function() {
				  return;
			      // 模拟请求
			      const _this = this
			          // 请求成功
					   setTimeout(() => {
			          const newData = []
				if(newData.length > 0){
					uni.showLoading({
					    title: '加载中...',
					    mask: true
					})
					_this.list = _this.list.concat(newData);
					 setTimeout(() => {
						 	uni.hideLoading()
					 },1000)
				
				}else{
					uni.showToast({
					    title: '没有更多数据',
					    icon: 'none',
						position:"bottom"
					})
				};
				 }, 500)
			  }
			}
		}
	
</script> 

<style scoped>
	.body{
		background-color: #f5f5f5;
	}
	.main{
		background-color: #fff;
		margin-top: 20rpx;
	}
	
	.items{
		padding: 20rpx 40rpx;
		font-size: 30rpx;
		position: relative;
		line-height: 1.5rem;
	}
	.status{
		position: absolute;
		right: .5rem;
		top: .5rem;
	}
	.success{
		color:#4CD964
	}
	.fail{
		color: #AA0000;
	}
	.top{
		height: 100rpx;
		padding-left: 50rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #e9e9e9;
		
	}
	.bottom{
		padding: 40rpx 40rpx;
		display: flex;
		
	}
	.bottom-pic{
		width: 400rpx;
		height: 200rpx;
		border: 1px solid transparent;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.bottom-pic image{
		width: 100%;
		height: 100%;
	}
	.bottom-title{
		font-size: 35rpx;
		line-height: 40rpx;
		padding-left: 10rpx;
	}
	
</style>
